<template>
	<view class="body">
		<view class="headbox">
			<view class="headbox_in">
				<scroll-view class="scroll-view_H" style="width: 700rpx;" scroll-x="true">
					<view class="headlis" @tap="selecttypes" :data-id="item.id" :class="[item.id==menuid?'txticons':'']" v-for="item in menu">{{item.name}}
					</view>
				</scroll-view>
			</view>
		</view>

		<view class="types">
			<view class="types1">
				<picker @change="getaddress" range-key="name" :range="address">
					 {{address_name}} <text class="types1text icon-xiangxia1 iconfont"></text>
				</picker>


			</view>
			<view class="types1">
				<picker @change="geticons" range-key="name" :range="icons">
					 {{icons_name}} <text class="types1text icon-xiangxia1 iconfont"></text>
				</picker>

			</view>
			<view class="types1">
				<picker @change="getuse"  :range="array">
					 {{use_name}} <text class="types1text icon-xiangxia1 iconfont"></text>
				</picker>

			</view>
		</view>

		<view class="more" style="background: #ffffff;">

			<view class="goodbox" v-for="item in lists">

				<view class="goodlibox" @tap="seeinfos" :data-id="item.id">

					<image class="good_image" :src="item.image" mode="aspectFill"></image>

					<view class="goodli_more">

						<view class="goodli_title font1">
							{{item.name}}
						</view>
						<view class="goodli_icon font1">
							{{item.icons_sname}}
						</view>

						<view class="goodli_mongy">
							<view class="goodli_money1 font1"> ¥ {{item.money}} </view>
							<view class="goodli_money2 font1"> {{item.property==1?'个人':'企业'}} </view>
						</view>
						<view class="goodli_mongy">
							<view class="goodli_add1 font1"> {{item.ares}} {{item.ares_status==1?'平方米':'亩'}} </view>
							<view class="goodli_add2 font1"> {{item.address_sname}} </view>
						</view>
					</view>

				</view>

			</view>

		</view>
	</view>
</template>

<script>
	import {
		curl
	} from 'common/api.js';

	export default {
		data() {
			return {
				array: ['出租', '转让', '合作'],
				index: 0,
				menu: '',
				menuid: 0,
				page:1,
				lists:[],
				address:'',
				address_id:'',
				address_name:'地区',
				
				icons:'',
				icons_id:'',
				icons_name:'标签',
				
				use:'',
				use_id:'',
				use_name:'用途'
			}
		},
		onLoad(ret) {
			var that = this;
			curl('index/getmenus', {}).then((res) => {
				that.menu = res.data
			});
			
			//标签
			curl('index/geticons', {}).then((res) => {
				that.icons = res.data
			});
			//地址
			curl('index/getaddress', {}).then((res) => {
				that.address = res.data
			});
			
			curl('index/getmenus', {}).then((res) => {
				that.menu = res.data
			});
			
			if (ret.cid) {
				that.menuid=ret.cid
			}	
			
			this.getlistby();
		},
		onShareAppMessage(res) {
			
		},
		methods: {
			seeinfos(ret){
				console.log(ret);
				var id=ret.currentTarget.dataset.id;
				
				uni.navigateTo({
					url:"/pages/index/info?id="+id
				})
			},
			getlistby(){
				var that=this;
				var page=this.page;
				var lists=this.lists;
				var menuid=that.menuid;
				var address_id=that.address_id;
				var icons_id=that.icons_id;
				var use_id=that.use_id;
				
				curl('index/getallland', {
						page:page,
						use_id:use_id,
						icons_id:icons_id,
						address_id:address_id,
						menuid:menuid
					}).then((res) => {
						
						var list=res.data;
						
						list.forEach(function(item){
							
							lists.push(item)
							
						})
						
						that.lists=lists;
						that.page=page+1;
					
				});
			},
			//选择分类
			selecttypes(ret){
				var id=ret.currentTarget.dataset.id;
				console.log(id);
				this.menuid=id;
				this.lists=[];
				this.page=1;
				
				this.getlistby();
			},
			
			//选择标签
			getuse(ret){
				console.log(ret);
				var index=ret.detail.value;
				console.log(index);
				var address=this.array;
				
				this.use_id=parseInt(index)+1;
				this.use_name=address[index];
				this.lists=[];
				this.page=1;
				
				this.getlistby();
			},
			
			//选择地址
			getaddress(ret){
				console.log(ret);
				var index=ret.detail.value;
				console.log(index);
				var address=this.address;
				
				this.address_id=address[index].id;
				this.address_name=address[index].name;
				this.lists=[];
				this.page=1;
				this.getlistby();
			},
			
			
			//选择标签
			geticons(ret){
				console.log(ret);
				var index=ret.detail.value;
				console.log(index);
				var address=this.icons;
				
				this.icons_id=address[index].id;
				this.icons_name=address[index].name;
				this.lists=[];
				this.page=1;
				
				this.getlistby();
			}
		}
	}
</script>

<style>
	.txticons {
		color: #ee5122 !important;
		font-weight: 600 !important;
	}

	.goodli_add1 {
		font-size: 28rpx;
		font-weight: 400;
		width: 280rpx;
		height: 50rpx;
		line-height: 50rpx;
		color: #666666;
	}

	.goodli_add2 {
		font-size: 28rpx;
		font-weight: 400;
		width: 180rpx;
		height: 50rpx;
		line-height: 50rpx;
		color: #666666;
		text-align: right;
	}

	.goodli_money2 {
		font-size: 28rpx;
		font-weight: 400;
		width: 180rpx;
		height: 50rpx;
		line-height: 50rpx;
		color: #666666;
		text-align: right;
	}

	.goodli_money1 {
		font-size: 40rpx;
		font-weight: bold;
		width: 280rpx;
		height: 50rpx;
		line-height: 50rpx;
	}

	.goodli_mongy {
		height: 50rpx;
		width: 480rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.goodli_icon {
		height: 40rpx;
		width:fit-content;
		
		background: #ee5122;
		border-radius: 10rpx;
		text-align: center;
		line-height: 40rpx;
		font-size: 24rpx;
		color: #ffffff;
		font-weight: 500;
		padding: 0 25rpx;
	}

	.goodli_title {
		height: 50rpx;
		width: 480rpx;
		font-size: 32rpx;
		flex-wrap: 500;
		color: #333333;
	}

	.goodli_more {
		width: 480rpx;
		height: 190rpx;
		margin-left: 20rpx;
	}

	.good_image {
		width: 180rpx;
		height: 180rpx;
		border-radius: 10rpx;
	}

	.goodlibox {
		width: 700rpx;
		height: 230rpx;
		margin: auto;
		display: flex;
		align-items: center;
	}

	.goodbox {
		width: 750rpx;
		height: 230rpx;
		border-bottom: 1px solid #ececec;
		background: #ffffff;
	}

	.types1text {
		font-size: 28rpx;
		color: #333333 !important;
		margin-left: 10rpx;
	}

	.types1 {
		width: 33%;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #333333;
	}

	.types {
		width: 700rpx;
		height: 80rpx;
		margin: auto;
		display: flex;
		align-items: center;
	}

	.headlis {
		display: inline-block;
		height: 75rpx;
		line-height: 75rpx;
		margin-right: 20rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #333333;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 700rpx;
		overflow-x: hidden;
	}

	.headbox_in {
		width: 710rpx;
		height: 75rpx;
		margin: auto;
	}

	.headbox {
		width: 750rpx;
		height: 75rpx;
		border-bottom: 1px solid #ececec;
		background: #ffffff;
	}

	.body {
		background: #fafafa;
		min-height: 100vh;
	}
</style>